<template>
    <!-- 常规登录 -->
    <div class="common-login">
        <h1 class="title">后台管理系统</h1>

        <!-- 账户，密码，验证码  登录按钮-->

        <el-form-item label="用户名" prop="username" class="el-form-item">
            <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password" class="el-form-item">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="captcha" class="el-form-item">
            <el-input maxlength="5" v-model="loginForm.captcha" type="text"
                @keydown.native.enter="submitForm('loginFrom')" class="captcha" ref="captcha"></el-input>
            <span class="captcha-svg" v-loading="loading">
                <i v-html="captcha" @click="getCaptchas" class="cap"></i>
            </span>
        </el-form-item>
        <!-- v-loading="loading" -->

        <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')" class="el-button-common"
                style="height: 40px;">登录</el-button>
        </el-form-item>

        <el-form-item>
            <div class="sms">
                <!-- 手机icon图标 -->
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shouji-iphone12-zhengmian"></use>
                </svg>
                <!-- 切换短信登录 -->
                <a href="javascript:;" @click="$emit('changeSmsType')" style="color: #fff; font-size: 16px">切换短信登录</a>
            </div>
        </el-form-item>
    </div>


</template>

<script>
import * as api from "@/api/users";

// 表单验证的思路： 当前组件的loginForm变化，同步到父组件的loginForm就行
export default {
    mounted() {
    },
    created() {
        this.getCaptchas();
    },
    // props: ['loginForm'],
    data() {
        return {
            isSmsLogin: true,     //控制是否切换短信登录
            captcha: "", //验证码
            loading: false,
            loginForm: {
                username: '',
                password: '',
                captcha: ''
            }
        }
    },
    //通过watch监听LoginFrom的变化
    watch: {
        loginForm: {
            handler(newVal) {
                // console.log(newVal);
                this.$emit('syncLoginForm', newVal)
            },
            deep: true,
        }
    },
    methods: {
        //表单提交验证
        submitForm() {
            this.$emit('submit')
            // 跳转页面
            this.$router.push("/")
        },
        //封装一个获取验证码的方法
        getCaptchas() {
            // 打开加载动画
            this.loading = true
            api.getCaptcha()
                .then((res) => {
                    this.captcha = res.data.img;
                    //关闭加载动画
                    this.loading = false
                });
        },
        // getCaptchas() {
        //     api.getCaptcha().then((res) => {
        //         this.captcha = res.data.img;
        //     });
        // },
    },

}
</script>


<style lang="less" scoped>
.title {
    width: 100%;
    /* font-size: 30px; */
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
    margin: 0 0 60px 40px;

}

.sms {
    margin-left: -20px !important;
    width: 250px !important;
}

.captcha {
    width: 125px;
    height: 45px;
    border: 0;

    /deep/.el-input__inner {
        border-radius: 0;
        border-right: none;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        height: 40px;
        border: 0;

    }
}

.captcha-svg {

    display: inline-block;
    width: 125px;
    height: 40px;
    color: #888;
    background-color: #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    vertical-align: middle;
    margin-bottom: 3.3px;
    overflow: hidden;
    cursor: pointer;


    /deep/ .cap {
        display: flex;
        position: absolute;
        width: 125px;
        height: 40px;

    }

}

.icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 20px;
}
</style>   